<!--
/**
* Desc: MoreCouponPopup 精选优惠劵弹窗
*/
-->
<template>
  <zm-popup
    v-model="show"
    @close="close"
    mode="center"
    :closeable="false"
    :round="9"
  >
    <view class="main">
      <view class="fs34 fb tc">优惠提醒</view>
      <view class="fs28 mt30">您正在原价购票，推荐以下方式下单更省钱！</view>
      <view
        @click="useDiscountRule"
        v-if="discountRule.benefitPrice"
        class="discount"
        >特惠价，支付
        <text class="fc-yellow">{{ discountRule.totalPrice }}</text
        >元，本单立省<text class="fc-yellow">{{
          discountRule.benefitPrice
        }}</text
        >元</view
      >
      <view
        @click="useCoupon"
        v-if="discountPackageList && discountPackageList.length > 0"
        class="coupon"
      >
        <view
          >买券包，支付 <text class="fc-yellow">{{ getPayMoney() }}</text
          >元，本单立省<text class="fc-yellow">{{
            calcPackageDiscountPrice(discountPackageList[0])
          }}</text
          >元</view
        >
        <view class="flex mt20">
          <view class="coupon-name fs32 mr20">
            {{ discountPackageList[0].name }}
            {{ discountPackageList[0].couponNum }}张</view
          >
          <view class="fs32"> x{{ useNum() }}份 </view>
        </view>
        <view
          class="mt20"
          v-for="item in discountPackageList[0].package"
          :key="item.couponId"
        >
          <view class="fs26 fc3">
            {{ item.name }} 共{{ item.number * useNum() }}张</view
          >

          <view class="fs26 fc8 mt15">有效期：{{ item.validity }}</view>
        </view>
        <view
          v-if="ticketNum % discountPackageList[0].couponNum != 0"
          class="fs24 fc-yellow mt20"
        >
          本单用{{ ticketNum }}张兑换券，剩下券下次购票可兑换
        </view>
      </view>
      <view class="sure" @click="sure">放弃优惠，继续使用原价购票</view>
    </view>
  </zm-popup>
</template>

<script>
  import ZmPopup from '@/commons/ZmPopup'
  export default {
    name: '',
    components: {
      ZmPopup
    },
    props: {
      value: {
        type: Boolean,
        default: false
      },
      ticketNum: {
        tpye: Number,
        default: 1
      },
      discountPackageList: Array,
      discountRule: {
        type: Object,
        default() {
          return {}
        }
      },
      discountPrice: [String, Number],
      ablePackageCouponLen: [String, Number] // 套票可用张数
    },
    computed: {
      show: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      }
    },
    data() {
      console.log(
        'discountPackageList',
        this.discountPackageList,
        this.discountRule
      )
      return {
        chooseItem: {}
      }
    },
    methods: {
      close() {
        this.$emit('input', false)
      },
      sure() {
        this.$emit('use')
        this.$emit('input', false)
      }, // 计算券包立省金额
      calcPackageDiscountPrice(item = {}) {
        const siglePrice = this.$utils.isNaNStr(item.siglePrice) // 套票单张价格
        const singleSalePrice = this.$utils.isNaNStr(this.discountPrice) // 单个座位价格
        const p = (singleSalePrice - siglePrice) * this.ablePackageCouponLen
        console.log('calcPackageDiscountPrice', singleSalePrice, siglePrice)
        return this.$utils.toFixed(p)
      },
      useNum() {
        let num = parseInt(
          this.ticketNum / +this.discountPackageList[0].couponNum
        )
        if (this.ticketNum % +this.discountPackageList[0].couponNum !== 0) {
          num++
        }
        console.log(
          this.ticketNum,
          this.discountPackageList,
          this.ticketNum / +this.discountPackageList[0].couponNum,
          this.ticketNum % +this.discountPackageList[0].couponNum,
          num
        )
        return num
      },
      useDiscountRule() {
        this.$emit('useDiscountRule', this.discountRule)
        this.$emit('input', false)
      },
      useCoupon() {
        this.$emit('useCoupon', this.discountPackageList[0], this.useNum())
        this.$emit('input', false)
      },
      getPayMoney() {
        return this.$utils.toFixed(
          this.discountPackageList[0].saleTotalPrice * this.useNum() +
            +this.discountPackageList[0].diffPriceSum
        )
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main {
    height: auto;
    width: 660rpx;
    padding: 25rpx;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .discount {
    margin-top: 25rpx;
    font-size: 30rpx;
    box-sizing: border-box;
    padding-left: 20rpx;
    width: 100%;
    line-height: 90rpx;
    height: 90rpx;
    border: 2rpx solid #e3e3e3;
    border-radius: 12rpx;
  }
  .coupon {
    margin-top: 14rpx;
    font-size: 30rpx;
    padding: 28rpx 20rpx;
    box-sizing: border-box;
    border: 2rpx solid #e3e3e3;
    border-radius: 12rpx;
    .coupon-name {
      color: #3bc5d2;
    }
  }
  .sure {
    text-align: center;
    margin-top: 27rpx;
    font-size: 24rpx;
    color: #888888;
  }
</style>
